<template>
  <!-- 吸顶效果 -->
  <div :style="{height:height+'px',zIndex:zIndex}">
    <div
      :class="className"
      :style="{top:(active ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
    >
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "Sticky",
  props: {
    // 距离顶部距离
    stickyTop: {
      type: Number,
      default: 0
    },
    // 堆叠顺序
    zIndex: {
      type: Number,
      default: 1
    },
    // 吸顶效果的样式
    className: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 是否有滚动到过元素定位的位置
      active: false,
      // 定位的方式
      position: "",
      // 吸顶元素的宽
      width: undefined,
      // 吸顶元素的高
      height: undefined
    };
  },
  mounted() {
    // 设置元素的高
    this.height = this.$el.getBoundingClientRect().height;
    window.addEventListener("scroll", this.handleScroll);
    window.addEventListener("resize", this.handleResize);
  },
  activated() {
    this.handleScroll();
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    sticky() {
      // 是否已滚动小于元素定位点 已滚动到过后不再重复设置
      console.log(this.active, "this.active");
      if (this.active) {
        return;
      }
      debugger;
      // 设置定位方式
      this.position = "fixed";
      // 标记已经小于定位点
      this.active = true;
      // 设置元素宽
      this.width = this.width + "px";
    },
    handleReset() {
      // 如果没有小于 元素定位设定点 那么不需要重置
      if (!this.active) {
        return;
      }
      this.reset();
    },
    // 取消元素设定的定位
    reset() {
      this.position = "";
      this.width = "auto";
      // 标记定位元素离顶部的距离大于设定值
      this.active = false;
    },
    handleScroll() {
      // 滚动时动态设置元素宽
      const width = this.$el.getBoundingClientRect().width;
      this.width = width || "auto";
      // 获取定位元素离顶部的距离
      const offsetTop = this.$el.getBoundingClientRect().top;
      // 定位元素离顶部距离 小于设定值时 开启定位
      console.log(this.active, offsetTop, this.stickyTop, "this.active");
      if (offsetTop < this.stickyTop) {
        this.sticky();
        return;
      }
      // 那么清空设定的
      this.handleReset();
    },
    // 窗口大小改变
    handleResize() {
      // 当窗口大小改变时已经滚动到过小于元素定位点，那么重新设置一次元素宽度
      if (this.active) {
        this.width = this.$el.getBoundingClientRect().width + "px";
      }
    }
  }
};
</script>
